<template>
  <v-layout class="rounded rounded-md">
    <v-app-bar
      color="primary"
      title="Patient is the key of life."
      :elevation="2"
      rounded
      density="compact"
      scroll-behavior="elevate"
      scroll-threshold="299"
    >
      <template v-slot:prepend>
        <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      </template>
    </v-app-bar>
    <v-navigation-drawer expand-on-hover v-model="drawer" :temporary="true">
      <v-list density="compact">
        <v-list-item
          prepend-icon="fas fa-marker"
          value="home"
          title="设计"
          to="/design"
        ></v-list-item>
        <v-list-item
          prepend-icon="fas fa-house-medical-flag"
          value="use"
          title="使用"
        ></v-list-item>
        <v-list-item
          prepend-icon="fas fa-circle-exclamation"
          value="canvas-editor-intro"
          to="/canvas-editor-intro"
          title="canvas-editor说明"
        ></v-list-item>
        <v-list-item
          prepend-icon="fas fa-computer-mouse"
          value="event-practice"
          title="事件"
          to="/event-practice"
        ></v-list-item>
        <v-list-item
          prepend-icon="fas fa-palette"
          value="Canvas"
          to="/canvas-practice"
          title="Canvas"
        ></v-list-item>
        <v-list-item
          prepend-icon="fas fa-solid fa-database"
          value="hibernate"
          to="/hibernate"
          title="Hibernate and Jpa"
        ></v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-main class="d-flex align-center justify-center">
      <router-view></router-view>
    </v-main>
  </v-layout>
  <global-message></global-message>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import GlobalMessage from "@/components/messages/global-message.vue";

const drawer = ref(false)
</script>
<style scoped></style>
